import { v4 as uuidV4 } from 'uuid'
// npm i --save-dev @types/uuid

type Todo = {
  id: string,
  title: string,
  completed: boolean,
  createdAt: Date
}

// const todoList = document.querySelector<HTMLUListElement>("#listTodo")
// const inputTodo = document.querySelector<HTMLInputElement>("#inputTodo");
// const formAddTodo = document.querySelector<HTMLFormElement>("#formAddTodo")

const listTodo = document.getElementById("listTodo") as HTMLUListElement | null;
const inputTodo = document.getElementById("inputTodo") as HTMLInputElement | null;
const formAddTodo = document.getElementById("formAddTodo") as HTMLFormElement | null;
const todos: Todo[] = loadTodos()

todos.forEach((todo) => {
  addTodo(todo)
})

formAddTodo?.addEventListener("submit", e => {
  e.preventDefault()
  
  if (inputTodo?.value == null || inputTodo?.value == "") {
    console.log("empty input")
    return
  }

  const todo: Todo = {
    id: uuidV4(),
    title: inputTodo.value,
    completed: false,
    createdAt: new Date()
  }

  todos.push(todo);

  addTodo(todo)

  inputTodo.value = ""
})
 



function addTodo(todo: Todo) {
  const item = document.createElement("li")
  const label = document.createElement("label")
  const checkbox = document.createElement("input")
  checkbox.type = "checkbox"
  checkbox.checked = todo.completed;

  checkbox.addEventListener("change", () => {
    todo.completed = checkbox.checked
    console.log(todo)
    console.log(todos)
    saveTodos(todos)
  })


  label.append(checkbox, todo.title)
  item.append(label)
  listTodo?.append(item)
  saveTodos(todos)
} 

function saveTodos(todos: Todo[]) {
  localStorage.setItem("TODOS", JSON.stringify(todos))
}

function loadTodos(): Todo[] {
  const todos = localStorage.getItem("TODOS")
  
  if (todos == null) return []
  else return JSON.parse(todos);
}